//获取操作对象
var div1 = document.querySelector('#div1')

//获取地址栏中的信息
var search1 = location.search
var data //存放当前商品信息 方便下面使用
    //判断地址栏中是否有参数
if (search1) {
    //分割字符串，转为数组，并获取id值
    var id1 = search1.split('=')[1];
    //使用自执行函数获取响应结果
    (async function() {
        //获取响应结果
        data = await PromiseAjax({
                url: './php/jd_detail.php',
                data: 'id=' + id1
            })
            //把接收到的数据转为json对象
        data = eval('(' + data + ')')
            //给当前商品设置详情信息

        var str = ` 
        <div class="product_intro">        
    
        <div class="enlarge">
        <div class="middle">
            <img src="${data.goods_big_logo}">
            <div class="shade"></div>
            <div class="big">
                <img src="${data.goods_big_logo}">
            </div>
        </div>
    </div>

        <h1>${data.goods_name}</h1>
     
        <ul id="summary">
           
            <li id="summary_price">
                <p>京 东 价：</p>
                <div class="content">
                    <b>￥${data.goods_price}</b>
                    <a href="#">(降价通知)</a>
                </div>
            </li>
         
            <li id="summary_market">
                <p class="title">商品编号：</p>
                <div class="content">
                    <span>960148</span>
                </div>
            </li>
          
            <li id="summary_grade">
                <p>商品评分：</p>
                <div class="content">
                    <span></span>
                    <a href="#">(已有<b>47662</b>人评价)</a>
                </div>
            </li>
          
            <li id="summary_stock">
                <p>配 送 至：</p>
                <div class="content">
                    <div id="store_select">
                        <h3>北京海淀区大钟寺<b></b></h3>
                        <div id="store_close"></div>
                    </div>
                    <b>有货</b>，23:00前完成下单，预计<b>明日（12月06日）</b>送达
                </div>
            </li>
           
            <li id="summary_service">
                <p>服&nbsp;&nbsp;务：</p>
                <div class="content">
                    由 <span>京东</span> 发货并提供售后服务
                </div>
            </li>
        </ul>
       
        <ul id="choose">
            <li id="choose_color">
                <p>选择颜色：</p>
                <div class="content">
                    <a href="#" class="selected">
                        <span>薰衣草</span>
                        <b></b>
                    </a>
                    <a href="#">
                        <span>索菲亚玫瑰</span>
                        <b></b>
                    </a>
                </div>
            </li>
            <li>
                <div id="choose_amount">
                    <div>购买数量:
                        <div class="content">
                            <div class="minus">-</div>
                            <input type="text" class="input" value="1">
                            <div class="add">+</div>
                        </div>

                    </div>

                    <div id="choose_btns" class="clear">
                        <a href="./buy.html" class="choose_btn_append"></a>
               
                    </div>
                </div>
            </li>
        </ul> </div><div class="introduce">${data.goods_introduce}</div>`
            //把当前设置完毕的信息，渲染到大盒子中
        div1.innerHTML = str
    })()
} else {
    alert('非法进入')
        //重新跳回列表页
    location = './list.html'
}

// 放大镜
function Enlarge(classname) {
    this.container = document.querySelector("." + classname);
    this.middleBox = this.container.querySelector(".middle");
    this.bigBox = this.container.querySelector(".big");
    this.middleImg = this.container.querySelector(".middle>img");
    this.bigImg = this.container.querySelector(".big>img");
    this.shade = this.container.querySelector(".middle .shade");
    this.init();
}

Enlarge.prototype.init = function() {
    this.middleBox.onmouseenter = () => {
        this.shade.style.display = this.bigBox.style.display = 'block';

        this.middleBox.onmousemove = e => {
            var e = e || window.event;
            var x = e.pageX - 130;
            var y = e.pageY - 130;
            var left = x - this.middleBox.offsetLeft - this.shade.offsetWidth / 2;
            var top = y - this.middleBox.offsetTop - this.shade.offsetHeight / 2;
            if (left <= 0) {
                left = 0;
            }
            if (top <= 0) {
                top = 0;
            }
            if (left >= this.middleBox.offsetWidth - this.shade.offsetWidth) {
                left = this.middleBox.offsetWidth - this.shade.offsetWidth;
            }
            if (top >= this.middleBox.offsetHeight - this.shade.offsetHeight) {
                top = this.middleBox.offsetHeight - this.shade.offsetHeight;
            }

            this.shade.style.left = left + "px"
            this.shade.style.top = top + "px"

            this.bigImg.style.left = -left / this.middleBox.offsetWidth * this.bigImg.offsetWidth + "px";
            this.bigImg.style.top = -top / this.middleBox.offsetWidth * this.bigImg.offsetHeight + "px";
        }
    }
    this.middleBox.onmouseleave = () => {
        this.shade.style.display = this.bigBox.style.display = 'none';
    }
}

window.onload = function() {
    setTimeout(() => {
        new Enlarge('enlarge');
    }, 100);
}


//给大盒子对象添加点击 委托事件
div1.onclick = function() {
    // 获取用户名
    var username = getCookie('name1');
    // console.log(username);
    //获取localStorage中的cartList键值
    var cartList = localStorage.getItem("cartList") || []
        //判断当前数组的长度是否大于0
    if (cartList.length > 0) {
        //把当前cartList转为数组对象
        cartList = eval('(' + cartList + ')')
        var bool = false //验证当前商品是否在locaStrong中存在
            //遍历当前数组
        cartList.forEach(item => {
            //判断遍历出来的商品是否跟当前要添加的商品一致
            if (item.goods_id == data.goods_id) {
                item.cart_number += 1
                bool = true
                    //重新给locaStrong赋值
                localStorage.setItem("cartList", JSON.stringify(cartList))
            }
        })

        if (!bool) {
            //修改当前商品数量
            data.cart_number = 1
            data.username = username
                //直接把当前商品追加到cartList数组中
            cartList.push(data)
                //重新给locaStrong赋值
            localStorage.setItem("cartList", JSON.stringify(cartList))
        }
    } else {
        //修改当前商品数量
        data.cart_number = 1
        data.username = username
            // data.a = 1
            //把当前商品信息追加cartList到数组中
        cartList.push(data)
            //重新给locaStrong赋值
        localStorage.setItem("cartList", JSON.stringify(cartList))
    }
}